<link rel="stylesheet" type="text/css" href="/static/css/style.css" media="screen" />
<link rel="STYLESHEET" type="text/css" href="/static/js/codebase/dhtmlxtabbar.css">
<link rel="stylesheet" type="text/css" href="/static/js/codebase/dhtmlxtree.css" />
<script  src="/static/js/codebase/dhtmlxcommon.js"></script>
<script  src="/static/js/codebase/dhtmlxtabbar.js"></script>
<script type="text/javascript" src="/static/js/codebase/dhtmlxcontainer.js"></script>
<script type="text/javascript" src="/static/js/codebase/dhtmlxtree.js"></script>
<script type="text/javascript" src="/static/js/codebase/ext/dhtmlxtree_start.js"></script>


 
 
<div id="a_tabbar" style="width:395px; height:390px;">
<div id="navTree1" name="Tab 1-1" setImagePath="/static/js/codebase/imgs/">
<ul>
				<li>Root
				<ul>
			{%autoescape off%}
				{{checkin_tree}}
			{%endautoescape%}
			</ul>
			</li>
			</ul>
</div>
<div id="navTree2" name="Tab 1-1"  width="100px">
    <img src="../common/page_b.gif">
</div>
<div id="navTree3" name="Tab 1-1"  width="100px">
    Content 3
</div>
</div>

<script>
tabbar = new dhtmlXTabBar({
    parent: "a_tabbar",
    image_path: "/static/js/codebase/imgs/",
    skin: "dhx_skyblue",
    mode: "left",
    tabs: [{
        id: "a1",
        label: "aaTab 1-1",
        width: "100px"
    }, {
        id: "a2",
        label: "yyTab 1-2",
        width: "100px",
        active: true
    }, {
        id: "a3",
        label: "xxxTab 1-3",
        width: "100px"
    }]
    });
tabbar.setContent("a1", "navTree1");
tabbar.setContent("a2", "navTree2");
tabbar.setContent("a3", "navTree3");
var myTree = dhtmlXTreeFromHTML('navTree1');
</script>